<template>
  <div>
    <!-- 数据概况 -->
    <el-card style="height: 350px; width: 100%;margin-top:2px" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="spTitle">数据概况</span>
      </div>
      <div class="divDate">
        <el-date-picker size="large" style="width: 280px" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="listQuery.dateTime" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" :picker-options="pickerOptions" @change="changeDate">
        </el-date-picker>
      </div>

      <el-row class="mt-30" style="margin-top:30px" :gutter="50">
        <el-col :xs="10" :sm="10" :lg="8" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-round-wrapper icon-round">
              <span class="icon iconfont icon-jine" style="font-size: 30px"></span>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">成交金额(元)</div>
              <div class="card-panel-num">{{this.data.amountReal}}</div>
            </div>
          </div>
        </el-col>

        <el-col :xs="10" :sm="10" :lg="8" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-round-wrapper icon-round">
              <span class="icon iconfont icon-dingdanshu" style="font-size: 30px"></span>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">支付订单数</div>
              <div class="card-panel-num">{{this.data.countOrder}}</div>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-round-wrapper icon-round">
              <span class="icon iconfont icon-leijiyonghushu" style="font-size: 30px"></span>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">新增用户</div>
              <div class="card-panel-num">{{this.data.countUser}}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row class="mt-25" :gutter="50">
        <!-- <el-col :xs="10" :sm="10" :lg="8" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-round-wrapper icon-round">
              <span class="icon iconfont icon-dingdanshu" style="font-size: 30px"></span>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">会员数量</div>
              <div class="card-panel-num">{{this.data.today.totalNewCustomer}}</div>
            </div>
          </div>
        </el-col> -->
        <el-col :xs="10" :sm="10" :lg="8" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-round-wrapper icon-round">
              <span class="icon iconfont icon-xiaofeirenshu " style="font-size: 30px"></span>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">消费人数</div>
              <div class="card-panel-num">{{this.data.countConsumers}}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="10" :sm="10" :lg="8" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-round-wrapper icon-round">
              <span class="icon iconfont icon-zongjine " style="font-size: 30px"></span>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">用户充值总额</div>
              <div class="card-panel-num">{{this.data.amountRecharge}}</div>
            </div>
          </div>
        </el-col>
      </el-row>

    </el-card>

    <el-card style="height:520px; width: 100%; margin-top: 15px" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="spTitle">近七日交易走势</span>
      </div>
      <div id="myChart" class="homeChart"></div>
    </el-card>

    <el-row class="mt-25" style=" margin-top: 15px;margin-bottom:20px">
      <el-col :span="12">
        <el-card style="height:520px; width: 100%;" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="spTitle">商品销售榜</span>
          </div>
          <el-table ref="tbSales" :data="listSales" style="width: 100%">
            <el-table-column align="center" prop="sortNo" label="排名"></el-table-column>
            <el-table-column align="center" prop="goodsName" label="商品名称"></el-table-column>
            <el-table-column align="center" prop="saleCount" label="销量(件)"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height:520px; width: 98%; margin-left: 2% " shadow="hover">
          <div slot="header" class="clearfix">
            <span class="spTitle">用户消费榜</span>
          </div>
          <el-table ref="tbConsumers" :data="listConsumers" style="width: 100%">
            <el-table-column align="center" prop="sortNo" label="排名"></el-table-column>
            <el-table-column align="center" prop="userName" label="用户昵称"></el-table-column>
            <el-table-column align="center" prop="sumAmount" label="实际消费额"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import TreeTable from 'vue-table-with-tree-grid'
// import treeTable from "@/components/TreeTable";
import * as ApiStatistic from '@/api/statistic'
import moment from "moment";
import { initDate, initPickerOptions } from '@/utils/util'
import qs from 'qs'
export default {
  name: 'module',
  components: {
  },

  directives: {

  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      listQuery: {
        dateTime: initDate(),
        startTime: undefined,
        endTime: undefined,
      },
      pickerOptions: initPickerOptions(),
      data: {},
      listSales: [],
      listConsumers: [],

    }
  },
  computed: {
  },

  created() {
    this.loadData();
    this.loadDataEchartTable();
  },
  mounted() {
  },
  methods: {
    changeDate(x) {
      this.loadData();
    },
    getTime(time) {
      const nowDate = new Date(time)
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      }
      const newmonth = date.month >= 10 ? date.month : '0' + date.month
      const day = date.date >= 10 ? date.date : '0' + date.date
      return date.year + '-' + newmonth + '-' + day
    },

    //获取统计数据
    loadData() {
      if (this.listQuery.dateTime != undefined) {
        this.listQuery.startTime = moment(new Date(this.listQuery.dateTime[0])).startOf("day").format("YYYY-MM-DD HH:mm:ss");
        this.listQuery.endTime = moment(new Date(this.listQuery.dateTime[1])).endOf("day").format("YYYY-MM-DD HH:mm:ss");
      } else {
        this.listQuery.startTime = undefined;
        this.listQuery.endTime = undefined;
      }
      ApiStatistic.loadStatisticData(this.listQuery).then((res) => {
        this.data = res.result;
      })
    },
    // 获取图标数据
    loadDataEchartTable() {
      this.isLoading = true
      ApiStatistic.loadStatisticEchartTable().then((res) => {
        var data = res.result
        this.listSales = data.listSales;
        this.listConsumers = data.listConsumers;
        //组装订单数和交易额
        let arrDate = [] //日期
        let arrOrder = [] //订单数
        let arrPrice = [] //交易额
        data.listEchart.forEach((element) => {
          arrOrder.push(element.orderCount)
          arrPrice.push(element.payOrderPrice)
          arrDate.push(this.getTime(element.data))
        })

        var option = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['订单数', '交易额'],
          },
          toolbox: {
            show: true,
            showTitle: false,
            feature: {
              mark: { show: true },
              magicType: { show: true, type: ['line', 'bar'] }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: arrDate,
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '订单数',
              type: 'line',
              data: arrOrder,
            },
            {
              name: '交易额',
              type: 'line',
              data: arrPrice,
            },
          ],
        };

        this.$nextTick(() => {
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption(option)
        })
      }).finally(() => {
        this.isLoading = false
      })
    },
    handleQuery() {

    },
    onBtnClicked: function (btnCode) {

    },

  },
}
</script>

<style lang="scss"  scoped>
.spTitle {
  margin-left: 8px;
  font-size: 15px;
  //   font-weight: 600;
  color: #000;
}
.divDate {
  text-align: center;
}
.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-radius: 8px;
  //   box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  div,
  span,
  p {
    caret-color: transparent;
  }

  .card-panel-icon-wrapper {
    float: left;
    margin: 0px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-round-wrapper {
    float: left;
    margin: 12px 0 0 14px;
    padding: 15px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }
  .icon-round {
    width: 60px;
    height: 60px;
    color: #36a3f7;
    background-color: #eff6ff;
    border-radius: 40px;
  }
  .icon-round .icon {
    font-size: 30px;
  }

  .card-const-wrapper {
    float: left;
    margin: 8px 0 0 8px;
    padding: 8px;
    transition: all 0.38s ease-out;
    border-radius: 5px;
  }
  .icon-const {
    width: 30px;
    height: 30px;
    color: #fff;
    background-color: #eff6ff;
    border-radius: 5px;
  }
  .icon-const .icon {
    font-size: 14px;
  }
  .card-const-description {
    float: left;
    margin: 15px 10px;
    margin-right: 0px;
    .card-panel-text {
      line-height: 14px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      font-weight: 600;
      // margin-bottom: 12px;
    }
  }
  .card-panel-icon {
    float: left;
    font-size: 48px;
  }
  .card-panel-description {
    float: left;

    margin: 16px 10px;
    margin-right: 0px;
    .card-panel-text {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 16px;
      margin-bottom: 12px;
    }
    .card-panel-num {
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
    }
  }
  .card-panel-only-description {
    margin: 10px 0 0 40px;

    .card-panel-text {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 16px;
      margin-bottom: 12px;
    }
    .card-panel-num {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 0, 0, 0.8);
    }
  }

  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }
    .icon-people {
      background: #40c9c6;
    }
    .icon-message {
      background: #36a3f7;
    }
    .icon-money {
      background: #f4516c;
    }
    .icon-shoppingCard {
      background: #34bfa3;
    }
  }
  .icon-people {
    color: #40c9c6;
  }
  .icon-message {
    color: #36a3f7;
  }
  .icon-money {
    color: #f4516c;
  }
  .icon-shoppingCard {
    color: #34bfa3;
  }
  .icon-xiaoshoue {
    color: #fff;
  }
}

.card-const {
  height: 60px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-radius: 8px;
  //   box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  div,
  span,
  p {
    caret-color: transparent;
  }

  .card-const-wrapper {
    float: left;
    margin: 8px 0 0 8px;
    padding: 8px;
    transition: all 0.38s ease-out;
    border-radius: 5px;
  }
  .icon-const {
    width: 30px;
    height: 30px;
    color: #fff;
    background-color: rgba(54, 163, 247, 0.2);
    border-radius: 5px;
  }
  .icon-const .icon {
    font-size: 14px;
  }
  .card-const-description {
    float: left;
    margin: 15px 10px;
    margin-right: 0px;
    .card-panel-text {
      line-height: 14px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      font-weight: 600;
      // margin-bottom: 12px;
    }
  }
}

.homeChart {
  width: 95%;
  height: 450px;

  background-color: #fff;
}
</style>